<template>
  <div class="b-menu" id="menu_list">
    <ul style="list-style: none;padding-left: 10px;margin-right:10px;">
      <li id="add"  style="margin: 10px auto">
        加入歌单 <i class="el-icon-s-order"></i><hr/>
      </li>
      <li v-for="(item, index) in dataList" 
        :key="index" 
        class="menu-item"
        @click="addToGather(item)">
        {{item.title}}
      </li>
    </ul>
    
  </div>
</template>

<script>
import { success, error } from '@/utils/toast'
import { mapGetters, mapMutations } from 'vuex'
import { getUserGatherService} from '@/api/login'
import { addItem2GatherService } from '@/api/music'
export default {
  name: 'menu-list',
  props:{
  },
  data() {
    return {
      cache:[],
      dataList:[],
    };
  },
  computed:{
    ...mapGetters(['getMenu', 'getMenuStat']),
  },
  mounted() {
    this.initPos()
    this.getData()
  },
  created() {
    window.onclick = () => {
      this.setPos()
    }

    window.oncontextmenu = () => {
      this.setPos()
    }
  },
  methods: {
    ...mapMutations(['setMenuStat', 'setMenuHit', 'setMenuStat']),
    setPos() {
      if (this.getMenu.hit) {
        this.initPos()
        this.setMenuHit(false)
        return
      }

      this.setMenuStat({status:false, hit:false})
    },
    initPos() {
      var menu = document.getElementById("menu_list")
      if (null == menu) return

      menu.style.left = (this.getMenu.posX + 14) + "px"
      menu.style.top = (this.getMenu.posY + 1) + "px"

      this.filterData()
    },
    filterData() {
      this.dataList = this.cache.filter(item => {
        if (item.gtype == 'A' && item.title != this.getMenu.artist) {
          return false
        }

        return true
      })
    },
    async getData() {
      let resp = await getUserGatherService({type: 'join'})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.cache = resp.data
      this.filterData()
    },
    async addToGather(item) {
      let resp = await addItem2GatherService({
        fileid: this.getMenu.fileid || '',
        gid: +item.gid || 0
      })
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.setMenuStat(false)
      success("添加成功")
    },
  }
}
</script>

<style scoped lang="scss">
  .b-menu {
    font-size:13px;
    max-width:150px;
    width:150px;
    position:absolute;
    background-color: rgb(245, 242, 242);
    // margin:5px auto;
    // border: 1px solid #909090

    .menu-item {
      margin: 10px auto;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: left;
    }

    .menu-item:hover {
      color:#409EFF; 
    }
  }

</style>
